<template>
  <EleModal
    :width="width"
    :visible="visible"
    :confirm-loading="loading"
    :title="isUpdate ? '修改' + title : '新建' + title"
    @update:visible="handelVisibleChange"
    @ok="handleOk"
    @cancel="handelCancel"
    :bodyStyle="bodyStyle"
    resizable
    :maskClosable="false"
    centered
    maxable
    :fullscreen="isFullscreen"
    class="container"
  >
    <slot></slot>
  </EleModal>
</template>

<script setup lang="ts" name="RadModal">
  import { EleModal } from 'ele-admin-pro';

  const bodyStyle = {
    overflowX: 'hidden',
    overflowY: 'visible',
    padding: '10px'
  };
  const emit = defineEmits({
    ok: () => {
      return true;
    },
    cancel: () => {
      return true;
    },
    visibleChange: (visible: boolean) => {
      return visible;
    }
  });
  defineProps({
    width: {
      type: String,
      default: '70%'
    },
    visible: {
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
      default: false
    },
    isUpdate: {
      type: Boolean,
      default: false
    },
    isFullscreen: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    }
  });

  const handleOk = (..._arg: any[]) => {
    emit('ok');
  };
  const handelCancel = (..._arg: any[]) => {
    emit('cancel');
  };
  const handelVisibleChange = (value: any) => {
    emit('visibleChange', value);
  };
</script>
